Table Tutorial
table.bmp Simple 2 x 2 table
Another 2 x 2 table
Rowspan and Colspan attributes
Row and Column Headings
 Cell Alignment
Cell width control
Centering Tables
Table Captions
 Cell Spacing
Cell Padding
Cell Background Colors
Borderless Tables

[Read Me] [HTML Samples] [Support] [Table Tutorial] [What's New]

Simple 2 x 2 table

1 2
3 4 

   <table border>
   <tr>
     <td>1</td>
     <td>2</td>
   <tr>
     <td>3</td>
     <td>4</td>
   </table>

Another 2 x 2 table

1 2
3 Cells expand
to fit		 

<table border>
<tr>
  <td>1</td>
  <td>2</td>
<tr>
  <td>3</td>
  <td>Cells expand<br>
       to fit</td>
</table>

Rowspan and Colspan attributes

1 2 3
4 Rowspan and Colspan attributes allow cells to occupy more than one row or column
5 

<table border>
<tr>
  <td>1</td>
  <td>2</td>
  <td>3</td>
<tr>
  <td>4</td>
  <td rowspan=2 colspan=2>
    Rowspan and Colspan attributes allow cells to
    occupy more than one row or column
  </td>
<tr>
  <td>5</td>
</table>

Rows and/or Columns may have headings

Days of Week
Monday Tuesday Wednesday
Week 1 1 2 3
Week 2 4 5 6 
<table border>
<tr>
   <td></td>
   <th colspan=3>Days of Week</th>
<tr>
   <td></td>
   <th>Monday</th>
   <th>Tuesday</th>
   <th>Wednesday</th>
<tr>
   <th>Week 1</th>
   <td>1</td>
   <td>2</td>
   <td>3</td>
<tr>
   <th>Week 2</th>
   <td>4</td>
   <td>5</td>
   <td>6</td>
</table>

Alignment in cells can be controlled

Alignment Attributes, Align and VAlign
Vertical
Alignment		 Top Middle Bottom
Horizontal
Alignment		 Left Center Right 
<table border>
<tr>
   <td></td>
   <th colspan=3>Alignment Attributes, Align and VAlign</th>
<tr>
   <th>Vertical<br>Alignment</th>
   <td valign=top>Top</td>
   <td valign=middle>Middle</td>
   <td valign=bottom>Bottom</td>
<tr>
   <th>Horizontal<br>Alignment</th>
   <td align=left>Left</td>
   <td align=center>Center</td>
   <td align=right>Right</td>
</table>

Table cells can contain just about anything
Background colors can be added

Images		 2 x 2 Table
Hotspots
Some
Text
Another table
1 2 3
4 5 
<table border>
<tr align=center>
  <td><img src="glass.bmp"><br>
      Images</td>
  <td bgcolor="#ffcdcd">
      <a href="#TableContents">Table Contents</a><br>
      Hotspots</td>
<tr align=center>
  <td>Some<br>Text</td>
  <td><table border bordercolor="#37ffcd">
  <caption>Another table</caption>
        <tr>
          <td>1</td>
          <td>2</td>
          <td bgcolor="#D9D9F3">3</td>
        <tr>
          <td>4</td>
          <td>5</td>
        </table></td>
</table>

Cell widths can be specified as a percentage of table width and table width as a percentage of window width

20% 50% 15% 15% 
<table border width=75%>
<tr>
   <td width=20%>20%</td>
   <td width=50%>50%</td>
   <td width=15%>15%</td>
   <td width=15%>15%</td>
</table>

Tables may be centered and have a caption either on the top or on the bottom.

Figure 1

Illustration of Centered Table with a Width of 75%
20% 50% 15% 15% 
<table border width=75% align=center>
<caption align=bottom><h3>Figure 1</h3>
         Illustration of Centered Table with a Width of 75%
</caption>
<tr>
   <td width=20%>20%</td>
   <td width=50%>50%</td>
   <td width=15%>15%</td>
   <td width=15%>15%</td>
</table>

The CellSpacing attribute controls the spacing between table cells.

CellSpacing of 0
1 2
3 4
CellSpacing of 10
1 2
3 4 
   <table border
   CellSpacing=0>
   <Caption>
   CellSpacing of 0
   </caption>
   <tr><td>1</td>
       <td>2</td>
   <tr><td>3</td>
       <td>4</td>
   </table>
 
   <table border
   CellSpacing=10>
   <Caption>
   CellSpacing of 10
   </caption>
   <tr><td>1</td>
       <td>2</td>
   <tr><td>3</td>
       <td>4</td>
   </table>

The CellPadding attribute controls the padding around table cells.

CellPadding of 0
1 2
3 4
CellPadding of 10
1 2
3 4 
   <table border
   CellPadding=0>
   <Caption>
   CellPadding of 0
   </caption>
   <tr><td>1</td>
       <td>2</td>
   <tr><td>3</td>
       <td>4</td>
   </table>
 
   <table border
   CellPadding=10>
   <Caption>
   CellPadding of 10
   </caption>
   <tr><td>1</td>
       <td>2</td>
   <tr><td>3</td>
       <td>4</td>
   </table>

Borderless tables

Borderless tables can be very useful for formatting documents. Tables are used in several places in this document to place items side by side. For instance, the Contents window above is divided into four columns using a Table.

wmelon.bmp Watermelon
with seeds

Text can be placed at the side of an image.
<table align=center>
<tr><td><img src="wmelon2.bmp"></td>
    <td>Watermelon<br>with seeds</td>
</table>